<!--
  用户管理-企业用户-banner管理
 -->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
    >
      <el-form-item label="banner名称" prop="bannerName">
        <el-input
          v-model="queryParams.bannerName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发布状态" prop="status">
        <el-select v-model="queryParams.status" clearable>
          <el-option value="0" label="可用" />
          <el-option value="1" label="禁用" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建人" prop="creator">
        <el-input
          v-model="queryParams.creator"
          placeholder="请输入创建人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="序号" type="index" />
      <el-table-column label="banner名称" align="center" prop="bannerName" />
      <el-table-column
        label="图片/视频"
        align="center"
        prop="imageUrl"
        width="180"
      >
        <template slot-scope="scope">
          <!-- banner类型 BannerType 0 学生小程序端图片、1 学生小程序端视频、2 学生小程序跳转链接、3 学生PC端图片、4 学生PC端视频、5 学生PC端跳转链接 -->
          <div v-if="[1, 4].indexOf(Number(scope.row.type)) > -1">
            <video
              :src="scope.row.imageUrl"
              style="width: 126px; height: 126px"
              width="126"
              height="126"
            />
          </div>
          <Thumbnail
            v-else
            :url="scope.row.imageUrl"
            :list="[scope.row.imageUrl]"
            :size="126"
          />
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.type | returnStatus }}
        </template>
      </el-table-column>
      <el-table-column label="发布状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ Number(scope.row.status) === 1 ? "禁用" : "可用" }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人/更新人" align="center" prop="updater">
        <template slot-scope="scope">
          <span>{{ scope.row.creator || "--" }}/{{
            scope.row.updater || "--"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-popconfirm
            v-if="Number(scope.row.status) === 0"
            title="确定暂停发布吗？"
            @confirm="handleEditStatus(scope.row, '1')"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >暂停发布</el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="Number(scope.row.status) === 1"
            title="确定发布吗？"
            @confirm="handleEditStatus(scope.row, '0')"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-edit"
            >发布</el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定删除banner吗？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-delete"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 编辑banner -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialog" width="60%">
      <!-- 搜索工作栏 -->
      <el-form
        ref="bannerForm"
        :model="bannerForm"
        size="small"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="banner名称" prop="bannerName">
          <el-input
            v-model="bannerForm.bannerName"
            style="width: 50%"
            placeholder="请输入banner名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="banner类型" prop="type">
          <!-- banner类型 BannerType 0 学生小程序端图片、1 小程序端视频、2 小程序跳转外链、3 学生PC端图片、4 学生PC端视频、5 学生PC端跳转链接、6 小程序跳转内部地址 -->
          <el-select
            v-model="bannerForm.type"
            style="width: 50%"
            @change="typeChange"
          >
            <el-option
              v-for="item in BannerType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="['0', '2', '3', '5'].indexOf(bannerForm.type) > -1"
          label="图片"
          prop="imageUrl"
        >
          <ImageUpload v-model="bannerForm.imageUrl" :file-size="5" />
        </el-form-item>
        <el-form-item
          v-if="['1', '4'].indexOf(bannerForm.type) > -1"
          label="视频"
          prop="imageUrl"
        >
          <FileUpload
            v-model="bannerForm.imageUrl"
            :is-show-tip="false"
            :limit="1"
            :file-size="2048"
            :only-video="true"
          />
        </el-form-item>
        <el-form-item
          v-if="['2', '5'].indexOf(bannerForm.type) > -1"
          label="跳转链接"
          prop="forwardUrl"
        >
          <el-input
            v-model="bannerForm.forwardUrl"
            style="width: 50%"
            placeholder="请输入跳转链接(https://xxx)"
            clearable
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCheckDialog">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBanner,
  createBanner,
  deleteBanner,
  updateBanner
} from '@/api/school-admin-api/platform/index.js'
import ImageUpload from '@/components/ImageUpload'
import FileUpload from '@/components/FileUpload'
import { BannerType } from '@/utils/frontDataDict.js'
import { deepClone } from '@/utils'

export default {
  name: 'Company',
  components: {
    ImageUpload,
    FileUpload
  },
  filters: {
    returnStatus(data) {
      const hasItem = BannerType.find(
        (item) => Number(item.value) === Number(data)
      )
      if (hasItem) {
        return hasItem.label
      } else {
        return '--'
      }
    }
  },
  data() {
    return {
      BannerType: BannerType,
      dialogTitle: '',
      editDialog: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 企业管理列表
      list: [],
      // 弹出层标题
      title: '',
      // 待审核查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        bannerName: null,
        updater: null,
        status: null,
        creator: null
      },
      bannerForm: {
        bannerName: '',
        type: '0', // banner类型 BannerType 0 学生小程序端图片、1 小程序端视频、2 小程序跳转外链、3 学生PC端图片、4 学生PC端视频、5 学生PC端跳转链接、6 小程序跳转内部地址
        imageUrl: '', // 图片/视频地址
        forwardUrl: '' // 跳转链接
      },
      rules: {
        // 表单校验规则
        bannerName: [
          { required: true, message: 'banner名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: 'banner类型不能为空', trigger: 'change' }
        ],
        imageUrl: [
          {
            required: true,
            message: '图片/视频文件不能为空',
            trigger: 'change'
          }
        ],
        forwardUrl: [
          { required: true, message: '跳转链接不能为空', trigger: 'change' }
        ]
      },
      // 当前审核数据
      currentRow: null,
      isEdit: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    typeChange(data) {
      // banner类型 BannerType 0 学生小程序端图片、1 小程序端视频、2 小程序跳转外链、3 学生PC端图片、4 学生PC端视频、5 学生PC端跳转链接、6 小程序跳转内部地址
      console.log('data>>>', this.currentRow.type, data)
      const index = Number(data)
      const imgType = [0, 2, 3, 5]
      const videoType = [1, 4]
      if ((imgType.indexOf(Number(this.currentRow.type)) > -1 && imgType.indexOf(index) > -1) || (videoType.indexOf(Number(this.currentRow.type)) > -1 && videoType.indexOf(index) > -1)) {
        this.bannerForm.imageUrl = this.currentRow.imageUrl
      } else {
        this.bannerForm.imageUrl = ''
      }
      this.bannerForm.forwardUrl = ''
    },
    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.currentRow = deepClone(row)
      Object.assign(this.bannerForm, this.currentRow)
      this.dialogTitle = '编辑banner'
      this.editDialog = true
    },
    // 删除
    handleDelete(row) {
      deleteBanner(row.id).then((res) => {
        if (res.code === 0 && res.data) {
          this.getList()
          this.$message.success('删除成功')
        }
      })
    },
    // 新增banner
    handleAdd() {
      this.bannerForm = this.$options.data().bannerForm
      this.dialogTitle = '新增banner'
      this.isEdit = false
      this.editDialog = true
    },
    handleEditStatus(row, status) {
      const params = deepClone(row)
      params.status = status
      updateBanner(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.getList()
          this.$message.success('更新成功')
        }
      })
    },
    // 提交banner
    submitCheck() {
      this.$refs.bannerForm.validate((boo) => {
        if (boo) {
          const params = deepClone(this.bannerForm)
          if (this.isEdit) {
            updateBanner(params).then((res) => {
              if (res.code === 0 && res.data) {
                this.getList()
                this.$message.success('更新成功')
                this.editDialog = false
              }
            })
          } else {
            params.status = '1'
            createBanner(params).then((res) => {
              if (res.code === 0 && res.data) {
                this.getList()
                this.$message.success('上传成功')
                this.editDialog = false
              }
            })
          }
        }
      })
    },
    // 关闭审核弹窗
    closeCheckDialog() {
      this.editDialog = false
    },
    // 请求待审核列表数据
    getList() {
      this.loading = true
      // 处理查询参数
      const params = deepClone(this.queryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      // 执行查询
      getBanner(params).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    // 重制搜索条件
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
